<template>
	<!-- <view class="baseBottomHeaderPadding"> -->
	<view class="">
		<!-- 搜索 -->
		<view class="BaseSearch">
			<Basetopselect @selectitem="selectitem" :showlast="boolzhi" :arr="itemarr" @pricebtn="pricebtn" :zhi="type" @sousuo="sousuo">
			</Basetopselect>
		</view>

		<view class="dropdownBox">
			<van-dropdown-menu :z-index="999">
				<!-- 价格 -->
				<van-dropdown-item id="item" title="价格">
					<SelectItems :items="rentprice" :actived="rentpriceIndex"
						@selectItem="selectItem($event, 'rentprice', 'rentpriceIndex',false, true)" v-if="type=='二手房'">
					</SelectItems>
					<SelectItems :items="ershouprice" :actived="rentpriceIndex"
						@selectItem="selectItem($event, 'ershouprice', 'rentpriceIndex',false, true)" v-if="type=='租房'">
					</SelectItems>
					<DropdownTwoBtn left="不限条件" right="确定" @clickReset="pricereset" @clickRight="priceright">
					</DropdownTwoBtn>
				</van-dropdown-item>
				<!-- 户型 -->
				<van-dropdown-item id="items" title="房型">
					<SelectItems :items="huxing" :actived="huxingIndex"
						@selectItem="selectItem($event, 'huxing', 'huxingIndex',false, true)"></SelectItems>
					<DropdownTwoBtn left="不限条件" right="确定" @clickReset="huxingreset" @clickRight="huxingright">
					</DropdownTwoBtn>
				</van-dropdown-item>
				<!-- 筛选 -->
				<van-dropdown-item id="itema" title="筛选">
					<!-- 面积 -->
					<SelectItems :items="mianji" :actived="mianjiIndex"
						@selectItem="selectItem($event, 'mianji', 'mianjiIndex',false, true)" title="面积（㎡)" v-if="type=='二手房'">
					</SelectItems>
					
					<SelectItems :items="renttype" :actived="renttypeIndex"
						@selectItem="selectItem($event, 'renttype', 'renttypeIndex',false, true)" title="出租方式" v-if="type=='租房'">
					</SelectItems>
					<SelectItems :items="leixing" :actived="leixingIndex"
						@selectItem="selectItem($event, 'leixing', 'leixingIndex',false, false)" title="房源特色" v-if="type=='二手房'">
					</SelectItems>
					<SelectItems :items="housebright" :actived="housebrightIndex"
						@selectItem="selectItem($event, 'housebright', 'housebrightIndex',false, false)" title="房源亮点" v-if="type=='租房'">
					</SelectItems>
					<SelectItems :items="elevators" :actived="elevatorsIndex"
						@selectItem="selectItem($event, 'elevators', 'elevatorsIndex',false, false)" title="电梯" v-if="type=='租房'">
					</SelectItems>
					<SelectItems :items="chaoxiang" :actived="chaoxiangIndex"
						@selectItem="selectItem($event, 'chaoxiang', 'chaoxiangIndex',false, true)" title="朝向">
					</SelectItems>
					<SelectItems :items="louceng" :actived="loucengIndex"
						@selectItem="selectItem($event, 'louceng', 'loucengIndex',false, true)" title="楼层">
					</SelectItems>
					<DropdownTwoBtn left="不限条件" right="确定" @clickReset="shaixuanreset" @clickRight="shaixuanright">
					</DropdownTwoBtn>
				</van-dropdown-item>
				<van-dropdown-item :value="value1" :options="options2" @change="change5" title="排序"
					v-if="type=='二手房'" />
				<van-dropdown-item :value="value2" :options="options1" @change="change6" title="排序" v-if="type=='租房'" />
			</van-dropdown-menu>
		</view>

		<scroll-view scroll-y="true" class="myscroll" @scrolltolower="scrolltolower">
			<view class="content" v-for="(item,index) in arr" :key="index" @click="housingresource(item)">
				<image :src="item.image" mode="" class="tu"></image>
				<view class="brief">
					<view class="title">
						{{item.name}}
					</view>
					<view class="area">
						<text>{{item.room}}室{{item.hall}}厅</text>
						<text>{{item.building_area||item.house_area}}㎡</text>
						<text>{{item.orientation}}</text>
						<text>{{item.community_name}}</text>
					</view>

					<view class="">
						<view class="lablebox">
							<ColorfulLabel :labelArr="item.label"></ColorfulLabel>
						</view>
						<view class="pricebox">
							<view class="total" v-if="item.type==1">
								<text>{{item.price}}</text>万
							</view>
							<view class="price" v-if="item.type==1">
								{{item.unit_price}}元/㎡
							</view>
							<view class="price" v-if="item.type!=1">
								<text>{{item.price}}</text>元/月
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- <BaseBottom :selectPath="'/pages/loan/index'"></BaseBottom> -->
	</view>
</template>

<script>
	import Basetopselect from "../../components/Basetopselect/index.vue"
	import BaseHouseList from "../../components/BaseHouseList/index.vue";
	import YellowTags from "../../components/YellowTags/index.vue";
	import DropdownTwoBtn from "../../components/DropdownTwoBtn/index.vue";
	import SelectItems from '../../components/SelectItems/index.vue';
	// import BaseBottom from "../../components/BaseBottom/index.vue";
	import {
		gethouselist,
		getselect
	} from "../../api/api/index.js";
	import ColorfulLabel from "../../components/ColorfulLabel/index.vue"
	export default {
		components: {
			Basetopselect,
			BaseHouseList,
			YellowTags,
			DropdownTwoBtn,
			SelectItems,
			// BaseBottom,
			ColorfulLabel,
		},
		data() {
			return {
				// 出租房和二手房的价格显示
				priceshow: true,
				type: "二手房",
				// 下拉框
				itemarr: [{
					text: "二手房"
				}, {
					text: "租房"
				}],
				boolzhi: false,

				activeKey: 0,
				mainActiveIndex: 0,
				activeId: [],
				max: 10,
				house_type: [],
				renttype:[],
				renttypeIndex:[],
				// 价格数据
				ershouprice:[],
				rentprice: [],
				rentpriceIndex: [],
				//户型的数据
				huxing: [],
				huxingIndex: [],
				mianji: [],
				mianjiIndex: [],
				leixing: [],
				leixingIndex: [],
				chaoxiang: [],
				chaoxiangIndex: [],
				louceng: [],
				loucengIndex: [],
				// 房源亮点
				housebright:[],
				housebrightIndex:[],
				elevators:[],
				elevatorsIndex:[],
				// 加载
				page: 1,
				value1: "价格正序",
				value2: "sort desc",
				options2: [{
						text: "价格正序",
						value: "价格正序",
					},
					{
						text: "价格倒序",
						value: "价格倒序",
					},
				],
				options1: [{
						text: "综合排序",
						value: "sort desc",
					},
					{
						text: "最新发布",
						value: "create_time desc",
					},
					{
						text: "价格升序",
						value: "price asc",
					},
					{
						text: "价格倒序",
						value: "price desc",
					},
					{
						text: "面积升序",
						value: "building_area asc",
					},
					{
						text: "面积倒序",
						value: "building_area desc",
					},
				],

				// 房源
				arr: [],
			};
		},
		methods: {
			change5(e) {
				this.value1 = e.detail;
				this.arr = []
				this.page = 1
				this.public()
			},
			change6(e) {
				this.value2 = e.detail;
				this.arr = []
				this.page = 1
				this.public()
			},

			clickHouse() {
				this.jumpLink({
					link: "/pages/newHouseDetail/index"
				});
			},
			// 重置
			pricereset() {
				this.rentpriceIndex = []
			},
			huxingreset() {
				this.huxingIndex = []
			},
			shaixuanreset() {
				this.mianjiIndex = []
				this.leixingIndex = []
				this.chaoxiangIndex = []
				this.loucengIndex = []
				this.renttypeIndex =[]
				this.housebrightIndex=[]
				this.elevatorsIndex=[]
			},
			// 确定选择
			priceright() {
				this.arr = []
				this.page = 1
				this.public()
				this.selectComponent('#item').toggle();
			},
			huxingright(v) {
				this.arr = []
				this.page = 1
				this.public()
				this.selectComponent('#items').toggle();
			},
			shaixuanright(v) {
				this.arr = []
				this.page = 1
				this.public()
				this.selectComponent('#itema').toggle();
			},
			//查找一个数组中某个数据的某个字段
			takeSomeData(arr, id, name) {
				let value = ''
				arr.forEach(v => {
					if (v.id == id) {
						value = v[name]
					}
				})
				return value
			},
			// 房源页面跳转
			housingresource(v) {
				this.jumpLink({
					link: "/pages/particulars/index",
					query: {
						id: v.id,
						type: v.type
					}
				})
			},
			// 头部地区选择和搜索
			selectitem(item) {
				this.type = item
				this.boolzhi = true
			},
			pricebtn(e) {
				this.boolzhi = false
				this.type = e
				this.rentpriceIndex=[]
				this.public()
				if (e == "租房") {
					this.priceshow = false
					this.page = 1
				} else {
					this.page = 1
					this.priceshow = true
				}
			},
			sousuo(){
				console.log(this.type)
			},
			
			// 触底加载
			scrolltolower() {
				this.page = this.page + 1
				let data={}
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let min_price=""
				let max_price=""
				let sort=""
				let house_features=""
				// let data = {
				// 	page: this.page,
				// 	limit: 30,
				// 	type: this.type,
				// 	house_type: this.house_type
				// }
				if(this.type=="二手房"){
					data={
						page: this.page,
						limit: 30,
						type: this.type,
						house_type: this.takeSomeData(this.huxing, this.huxingIndex.join(), 'name'),
						min_price:this.takeSomeData(this.rentprice, this.rentpriceIndex.join(), 'min') ,
						max_price:this.takeSomeData(this.rentprice, this.rentpriceIndex.join(), 'max'),
						min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
						max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
						orientation: this.takeSomeData(this.chaoxiang, this.chaoxiangIndex.join(), 'name'),
						the_floor: this.takeSomeData(this.louceng, this.loucengIndex.join(), 'name'),
						house_features: this.leixingIndex.join('|'),
						sort: this.value1,
						rent_type:this.takeSomeData(this.renttype, this.renttypeIndex.join(), 'name'),
						// elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
					}
				}else{
					data={
						page: this.page,
						limit: 30,
						type: this.type,
						house_type: this.takeSomeData(this.huxing, this.huxingIndex.join(), 'name'),
						min_price:this.takeSomeData(this.ershouprice, this.rentpriceIndex.join(), 'min'),
						max_price:this.takeSomeData(this.ershouprice, this.rentpriceIndex.join(), 'max'),
						// min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
						// max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
						orientation: this.takeSomeData(this.chaoxiang, this.chaoxiangIndex.join(), 'name'),
						the_floor: this.takeSomeData(this.louceng, this.loucengIndex.join(), 'name'),
						house_features: this.housebrightIndex.join('|'),
						sort: this.value2,
						rent_type:this.takeSomeData(this.renttype, this.renttypeIndex.join(), 'name'),
						elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
					}
				}
				
				gethouselist(data).then(res => {
					uni.hideLoading()
					this.arr = this.arr.concat(res.data)
				})
			},
			
			public() {
				uni.showLoading({
					mask: true,
					title: '加载中'
				})
				let min_price=""
				let max_price=""
				let sort=""
				let house_features=""
				let data={}
				this.page = 1
				if(this.type=="二手房"){
					data={
						page: this.page,
						limit: 30,
						type: this.type,
						house_type: this.takeSomeData(this.huxing, this.huxingIndex.join(), 'name'),
						min_price:this.takeSomeData(this.rentprice, this.rentpriceIndex.join(), 'min') ,
						max_price:this.takeSomeData(this.rentprice, this.rentpriceIndex.join(), 'max'),
						min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
						max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
						orientation: this.takeSomeData(this.chaoxiang, this.chaoxiangIndex.join(), 'name'),
						the_floor: this.takeSomeData(this.louceng, this.loucengIndex.join(), 'name'),
						house_features: this.leixingIndex.join('|'),
						sort: this.value1,
						rent_type:this.takeSomeData(this.renttype, this.renttypeIndex.join(), 'name'),
						// elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
					}
				}else{
					data={
						page: this.page,
						limit: 30,
						type: this.type,
						house_type: this.takeSomeData(this.huxing, this.huxingIndex.join(), 'name'),
						min_price:this.takeSomeData(this.ershouprice, this.rentpriceIndex.join(), 'min'),
						max_price:this.takeSomeData(this.ershouprice, this.rentpriceIndex.join(), 'max'),
						// min_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'min'),
						// max_area: this.takeSomeData(this.mianji, this.mianjiIndex.join(), 'max'),
						orientation: this.takeSomeData(this.chaoxiang, this.chaoxiangIndex.join(), 'name'),
						the_floor: this.takeSomeData(this.louceng, this.loucengIndex.join(), 'name'),
						house_features: this.housebrightIndex.join('|'),
						sort: this.value2,
						rent_type:this.takeSomeData(this.renttype, this.renttypeIndex.join(), 'name'),
						elevator:this.takeSomeData(this.elevators, this.elevatorsIndex.join(), 'name')
					}
				}
				gethouselist(data).then(res => {
					uni.hideLoading()
					this.arr = res.data
					// this.arr = this.arr.concat(res.data)
					// if (res.data.length < this.limit) {
					// 	this.isOk = true
					// }
				})
			},
		},
		onLoad() {
			getselect({
				type: 'price,house_type,building_area,house_features,orientation,the_floor,rent_price,rent_term,rent_type,house_bright,elevator'
			}).then(res => {
				this.rentprice = res.data.price.child.map(v => {
					v.text = v.name
					return v
				})
				this.huxing = res.data.house_type.child.map(v => {
					v.text = v.name
					return v
				})
				this.mianji = res.data.building_area.child.map(v => {
					v.text = v.name
					return v
				})
				this.leixing = res.data.house_features.child.map(v => {
					v.text = v.name
					v.id = v.name
					return v
				})
				this.chaoxiang = res.data.orientation.child.map(v => {
					v.text = v.name
					return v
				})
				this.louceng = res.data.the_floor.child.map(v => {
					v.text = v.name
					return v
				})
				this.ershouprice=res.data.rent_price.child.map(v=>{
					v.text=v.name
					return v
				})
				this.renttype=res.data.rent_type.child.map(v=>{
					v.text=v.name
					return v
				})
				this.housebright=res.data.house_bright.child.map(v=>{
					v.text=v.name
					v.id = v.name
					return v
				})
				this.elevators=res.data.elevator.child.map(v=>{
					v.text=v.name
					return v
				})
			})
		},
		onShow() {
			this.public()
			uni.hideHomeButton();

		}
	};
</script>

<style scoped lang="scss">
	.BaseSearch {
		padding: 30rpx 17rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.threeIcon {
		image {
			width: 98rpx;
			height: 98rpx;
		}
	}

	.dropdownBox {
		background: #fff;

		.quyu {
			display: flex;

			.quyuRight {
				width: 100%;
			}
		}
	}

	.slot-content {
		background: #fff;
	}

	.BaseHouseList {
		padding: 30rpx 0;
		box-sizing: border-box;
		background: #fff;
	}

	.someTag {
		background: #fff;
		padding: 10rpx 15rpx;
		box-sizing: border-box;

		.u-tag {
			margin-right: 20rpx !important;
		}
	}


	/* 房源 */
	.content {
		display: flex;
		// margin-left: 20rpx;
		margin-bottom: 20rpx;

	}

	.tu {
		width: 208rpx;
		height: 169rpx;
		border-radius: 10rpx;
	}

	.content>.brief {
		margin-left: 35rpx;
		width: 400rpx;
	}

	.brief>.title {
		font-size: 28rpx;
		color: #282828;
		font-family: MicrosoftYaHei-Bold;
		font-weight: 700;
		font-stretch: normal;
		width: 300rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.brief>.area {
		font-size: 22rpx;
		color: #878787;
		font-family: MicrosoftYaHei-Bold;
		margin-top: 10rpx;
	}

	.brief>.area>text {
		margin-right: 10rpx;
	}

	.lablebox {
		display: flex;
	}

	.labeone {
		width: 71rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffdddc;
		font-size: 18rpx;
		display: inline-block;
		color: rgb(210, 73, 89);
	}

	.labletwo {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		border-radius: 16rpx;
		background-color: #ffefdc;
		font-size: 18rpx;
		color: #d88e35;
		margin-left: 7rpx;
	}

	.lablethree {
		display: inline-block;
		width: 102rpx;
		height: 31rpx;
		text-align: center;
		line-height: 31rpx;
		background-color: #dcf8ff;
		border-radius: 16rpx;
		font-size: 18rpx;
		color: #33b1d0;
		margin-left: 7rpx;
	}

	.pricebox {
		display: flex;
		margin-top: 10rpx;
	}

	.total {
		color: #e13c35;
		font-size: 18rpx;
		font-family: MicrosoftYaHei;
		margin-right: 34rpx;
	}

	.total>text {
		font-size: 30rpx;
		font-weight: 700;
		font-family: PingFang-SC-Heavy;
		margin-right: 10rpx;
	}

	.price {
		font-size: 20rpx;
		font-family: MicrosoftYaHei;
		color: #666666;
		margin-top: 12rpx;
	}

	/* 完善信息 */
	.complete {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		background-color: #f75653;
		font-size: 26rpx;
		color: #FFFFFF;
		margin-top: 32rpx;
	}


	.myscroll {
		height: calc(100vh - 239rpx);
		box-sizing: border-box;
		padding: 20rpx;
	}
</style>
